import { BaseEdge } from "@xyflow/react";

export default function StepEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const centerY = (targetY - sourceY) / 2 + sourceY;
  /**
   * M x1 y1 L x2 y2
   * M move 是移动到命令，将当前点移动到 x1, y1 坐标。
   * L lineTo 是 Line To 命令，它从当前点到x2 y2 坐标绘制一条线。改变当前点
   */
  const edgePath = `M ${sourceX} ${sourceY} L ${sourceX} ${centerY} L ${targetX} ${centerY} L ${targetX} ${targetY}`;

  return <BaseEdge id={id} path={edgePath} />;
}
